<template>
	<div class="login-wrap">
		<div class="login-content">
			<div class="title">
				<img src="../assets/img/logo.png" />
			</div>

			<ul>
				<li class="common">
					<i class="iconfont incon-img">&#xe649</i>
					<input type="text" v-model="info.username" maxlength="11" placeholder="请输入账号" />
				</li>

				<li class="common code-wrap">
					<i class="iconfont icon-mima incon-img"></i>
					<input type="text" v-model="info.password" placeholder="请输入密码" />
				</li>
				
				<li class="login" @click="login">登录</li>
				
				<svg class="icon" aria-hidden="true">
				    <use xlink:href="#icon-mima" rel="external nofollow" ></use>
				</svg>
			</ul>
		</div>
	</div>
</template>

<script>
	import {
		getIdentifyCode
	} from '@/api/model';
	import {
		codeLogin,
	} from '@/api/common.js';
	import utils from '@/assets/js/utils';
	import {
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				info: {
					username: '',
					password: ''
				},
				timer: null,
				codeText: '获取验证码',
				autoHeight: 0
			};
		},

		methods: {
			...mapActions(['getCommunal']),
			async getCode() {
				if (this.timer) return;
				const {
					username,
					code
				} = this.info;
				if (!mobile) {
					this.$message('请输入您的用户名');
					return;
				} 
				else {
					if (!/^1[0123456789]\d{9}$/.test(mobile)) {
						this.$message('手机号码有误');
						return;
					}
				}
				const obj = {
					type: '1',
					mobile: mobile
				};
				const {
					status
				} = await getIdentifyCode(obj);
				if (status !== 200) return;
				// 显示60s倒计时
				this.countDown();
			},

			countDown() {
				const TIME_COUNT = 60;
				if (!this.timer) {
					this.codeText = TIME_COUNT;
					this.timer = setInterval(() => {
						if (this.codeText > 0 && this.codeText <= TIME_COUNT) {
							this.codeText--;
						} else {
							this.codeText = '重新获取';
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000);
				}
			},

			async login() {
				const {
					username,
					password
				} = this.info;
				if (!username) {
					this.$message('请输入您的用户名');
					return;
				} 
				// else {
				// 	if (!/^1[0123456789]\d{9}$/.test(mobile)) {
				// 		this.$message('手机号码有误');
				// 		return;
				// 	}
				// }
				if (!password) {
					this.$message('请输入您的密码');
					return;
				}
				const obj = {
					username: this.info.username,
					password: this.info.password
				};
				const {data,status} = await codeLogin(obj);
				if (status !== 200) return;
				if(data.code == 200){
					utils.setSession('token', data?.data?.info?.token);
					utils.setSession('userType', data?.data?.info?.type);
					utils.setSession('schoolName', data?.data?.info?.school_name);
					utils.setSession('realname', data?.data?.info?.realname);
					utils.setSession('headimg', data?.data?.info?.headimg);
					utils.setSession('createTime', data?.data?.info?.create_time);
					this.$router.push('./model-square');
				}
				else{
					this.$message.warning(data && data.message || '登录失败');
				}
			}
		}
	};
</script>

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

<style lang="scss" scoped>
	input::-webkit-input-placeholder {
		/* WebKit browsers 适配谷歌 */
		@include textarea-placeholder;
		color: #999999;
		font-size: 14px;
	}

	input:-moz-placeholder {
		/* Mozilla Firefox 4 to 18 适配火狐 */
		@include textarea-placeholder;
		color:#999999;
		font-size: 14px;
	}

	input::-moz-placeholder {
		/* Mozilla Firefox 19+ 适配火狐 */
		@include textarea-placeholder;
		color:#999999;
		font-size: 14px;
	}

	input:-ms-input-placeholder {
		/* Internet Explorer 10+  适配ie*/
		@include textarea-placeholder;
		color: #999999;
	}
		.login-wrap {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background: url(../assets/img/login.png) no-repeat center center;
			background-size: 100% 100%;
			overflow-y: auto;
			.login-content {
				text-align: center;
				.title {
					img {
						width: 223px;
						height: 47px;
					}
				}

				ul {
					margin-top: 50px;
					padding: 30px;
					width: 500px;
					background: #FFFFFF;
					border-radius: 0px 0px 10px 10px;
					box-shadow: 0px 10px 20px 0px rgba(255,193,101,0.4), 0px 15px 15px 0px #FFE5BE;
					.common {
						width: 100%;
						height: 50px;
						margin: 20px auto 0 auto;
						display: flex;
						align-items: center;
						padding-left: 12px;
						background: #F4F3F0;
						border-radius: 5px 5px 5px 5px;
						border: 1px solid #E1DCCF;
						@include box-style;
						.incon-img {
							font-size: 18px;
						}

						input {
							width: 0;
							height: 100%;
							flex: 1;
							padding-left: 10px;
							appearance: none;
							border: none;
							outline: none;
							background: none;
							color: #333;
						}
					}

					.login {
						width: 100%;
						height: 50px;
						margin: 40px auto 0 auto;
						line-height: 50px;
						text-align: center;
						background: #FF8A00;
						border-radius: 5px 5px 5px 5px;
						font-size: 16px;
						@include font-style;
						@include cursor-style;
						color: #ffffff;
					}
				}
			}
		}

		@media only screen and (max-device-width: 1440px) {
			.login-wrap {
				width: 100%;
				height: 100%;
			}
		}
</style>
